<h3>Golden Section Esperiments</h3>

<h4>Test Sequence</h4>

<?php include_partial('default/mainMenu'); ?>

<h5>Sequence numbers</h5>

<ul>
  <?php foreach($sequence as $value): ?>
    <li>
    <?php echo $value; ?>
      </li>
  <?php endforeach; ?>
  </ul>


  <h5>Sequence simple graphs</h5>

<div id="mainContentBox">

    <div style="position: relative; float: left; width: 350px; height: <?php echo 22*count($sequence)+80; ?>px; margin: 0 5px;">
      <h6>Horizontal</h6>

      <div style="position: absolute; width: 350px; height: auto; bottom: 0px; font-size: 10px; vertical-align: top; overflow: visible; text-align: left;">
      <?php for($i = 0; $i < count($sequence); $i++): ?>
        <div style="margin: 2px 0; background: chartreuse ; border: 1px solid #73B65A; height: 18px; width: <?php echo round($percentageSequence[$i], 2); ?>%;"></div>
      <?php endfor; ?>
      </div>
    </div>

    <div style="position: relative; float: left; width: <?php echo 22*count($sequence); ?>px; height: <?php echo 22*count($sequence)+80; ?>px; margin: 0 5px;">
      <h6>Vertical</h6>

      <div style="position: absolute; width: <?php echo 22*count($sequence); ?>px; height: <?php echo 22*count($sequence); ?>px; bottom: 0px; font-size: 10px; vertical-align: bottom; overflow: visible; text-align: left; height: 250px;">
      <?php for($i = 0; $i < count($sequence); $i++): ?>
        <div style="position: absolute; bottom: 0; left: <?php echo 22 * $i; ?>px; margin: 0 2px; background: chartreuse ; border: 1px solid #73B65A; height: <?php echo round($percentageSequence[$i], 2); ?>%; width: 18px;"></div>
      <?php endfor; ?>
      </div>
    </div>

</div>
